<template>
    <div class="d">
        <el-card shadow="always">
            <el-table
                    :data="itemList"
                    style="width: 100%">
                <el-table-column
                        label="ID"
                        prop="id"
                        align="center"/>

                <el-table-column
                        label="标题"
                        prop="title"
                        align="center"/>
                <el-table-column
                        label="分类"
                        prop="category"
                        align="center"/>
                <el-table-column
                        label="品牌"
                        prop="brand"
                        align="center"/>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>


</template>

<script>
    import {findItems} from "@/api/items";

    export default {
        data() {
            return {
                itemList: []
            }
        },
        created() {
            this.findAllItems();
        },
        methods: {
            findAllItems(){
                findItems().then(({data}) => {
                    let _this = this
                    if(data.code === 0){
                        this.itemList = data.list
                    }
                    //无权访问页面
                    if(data.code === 401){
                        this.$message({
                            message: data.msg,
                            type: 'error',
                            onClose(){
                                Cookies.set("hzit-token",undefined)
                                _this.$router.push("/login")
                            }
                        });
                    }

                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    }
</script>

<style scoped>
    .d{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .el-card{
        width: 80%;
        margin-top: 20px;
    }
</style>